<template>
	<view class="mall-home">
		<view class="mall-header">
			<Header
				style="z-index:999"
				:data="formSearch.data"
				@search="searchList"
			/>
			<view class="fiter">
				<ProjectHead
					showFilter
					showSearch
					@sortChange="sortChange"
					@filterChange="filterChange"
				/>
			</view>
			<!--
			<HM-filterDropdown
				:menuTop="0"
				:filterData="menuData"
				:defaultSelected="defaultSelected"
				:updateMenuName="true"
				@getMin="getMin"
				@getMax="getMax"
				@confirm="confirm"
				dataFormat="Object"
			/>-->
		</view>
		<u-skeleton
			:loading="loading"
			:animate="true"
			rows="100"
		>
			<scroll-list
				class="scroll-bar"
				ref="list"
				:option="option"
				@load="readMorelist"
				@scrolltolower="readMorelist()"
				@refresh="refresh"
			>
				<Mallbody
					v-if="!loading"
					:goodList="goodList"
					class="mallbody"
				/>
				<u-empty
					v-if="!goodList.length"
					mode="car"
					icon="http://cdn.uviewui.com/uview/empty/car.png"
				/>
				<text v-if="total===formSearch.page">没有更多了···</text>
			</scroll-list>
		</u-skeleton>

		<!--筛选-->
		<u-popup
			:show="seleteShow"
			closeOnClickOverlay
			mode="bottom"
			@close="close"
			@open="open"
			round="40"
			class="popOn"
		>
			<view class="Selete-title">全部筛选</view>
			<view
				class="selectGood"
			>
				<view class="title">{{menuList[0].name}}</view>
				<view class="labels">
					<view

						v-for="(labels,index) in menuList[0].submenu"
						:key="index"
						:class="[type==labels.value?'active':'label']"

						@click="getType(labels.value)"
					>
						{{labels.name}}
					</view>
				</view>
			</view>
			<!--筛选物品-->
			<view
				class="selectGood"
			>
				<view class="title">{{menuList[1].name}}</view>
				<view class="labels">
					<view
						v-for="(labels,index) in menuList[1].submenu"
						:key="index"

						@click="getValue(labels.value)"
						:class="brand==labels.value?'active':'label'"
					>
						{{labels.name}}
					</view>
				</view>
			</view>
			<view class="price-title">价格区间</view>
			<view class="PriceRange">
				<view class="priceRa">
					<text>最低价:</text><input
						placeholder="自定义最低价"
						v-model="formSearch.min"
					>
					<hr style="width:10%">
					<text>最高价:</text><input
						placeholder="自定义最高价"
						v-model="formSearch.max"
					>
				</view>
			</view>
			<view class="btn">
				<button
					class="infor"
					width="150"
					@click="deleteGood()"
				>
					取消
				</button>
				<button
					class="primary"
					width="150"
					@click="getGoodList()"
				>
					确定
				</button>
			</view>
		</u-popup>
		<u-popup
			:show="showMall"
			mode="center"
			@close="close"
			@open="open"
			class="mallPu"
			closeOnClickOverlay
		>
			<image
				src="https://skillgo.cn/mallup.jpg"
				style="width:550rpx;height:550rpx"
			/>
		</u-popup>
	</view>
</template>

<script>
import Header from './componets/header.vue'
import mallbody from './componets/mallBody.vue'
import { getGoodsBy } from '@/api/MallPages/goods.js'
import { preProcessData } from '@/utils/firter.js'
import ScrollRefresh from '../../components/scroll-refresh/scroll-refresh.vue'
import SnappedBody from './componets/snappedBody.vue'
import ProjectHead from './componets/ProjectHead.vue'
export default {
  components: {
    'Header': Header,
    'Mallbody': mallbody,
    ScrollRefresh,
    // SlFilter,
    SnappedBody,
    ProjectHead
  },
  data() {
    return {

      // o元抢购专区
      SnappedList: [{ url: 'https://img.zcool.cn/community/01bbae56df8a9f32f875520f84cd9a.jpg@1280w_1l_2o_100sh.jpg', title: '专区一' }],
      // 商品列表
      goodList: [],
      // 访问的接口路径
      activeUrl: 'time',
      // 商品区间
      priceRange: [],
      // 展示
      showMall: true,
      //
      formSearch: {
        data: '', page: 1, size: 10, type: null, sort: 'ASC', min: 0, max: 100000, brand: null
      },
      brand: 4,
      type: null,
      filterResult: '',
      themeColor: '#3a62e9',
      titleColor: '#3a62e9',
      menuList: [
        {
          'name': '类别',
          'type': 'hierarchy-column',
          'submenu': [{
            'name': '全部',
            'value': 4
          }, {
            'name': '电瓶车',
            'value': 1
          },
          {
            'name': '书本',
            'value': 2
          },
          {
            'name': '其他',
            'value': 3
          }]

        },
        {
          name: '品牌筛选',
          'type': 'filter',
          'submenu':
            getApp().globalData.brand

        }
      ],
      seleteShow: false,
      loading: true,
      total: 1,
      // 加载更多文字
      readMoreIndex: true,
      option: {
        size: 5,
        auto: true,
      },
      len: 10,
      show: false
    }
  },

  //  加载更多
  onReachBottom: function() {
    this.readMorelist()
  },
  async created() {
    this.formSearch.data = getApp().globalData.searchVal || ''
    this.goodList = []
    this.formSearch.page = 1
    this.getGoodList()
    getApp().globalData.malltime += 1
    if (getApp().globalData.malltime >= 2) {
      this.showMall = false
    }
  },
  methods: {
    closeModal() {
      this.showmodal = false
    },
    /**
     * filterChange
     */
    filterChange() {
      this.seleteShow = true
    },
    /**
     * sortChange
     */
    sortChange(item) {

      this.activeUrl = item.sortBy
      this.formSearch.sort = item.orderBy
      this.getGoodList()
    },
    refresh(page) {
      this.goodList = []
      this.formSearch.page = 1
      this.getGoodList()
      this.$refs.list.refreshSuccess({ list: this.goodList, total: 50 })
      this.triggered = false
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false
      this.seleteShow = false
      this.showMall = false
      // console.log('close');
    },
    /**
     *
     */
    getValue(item) {
      console.log('asd', item)
      this.brand = item
      this.formSearch.brand = item
    },
    /**
     * 获取项目类型
     */
    getType(item) {
      this.type = item
      this.formSearch.type = item
    },
    /**
     * 获取筛选数据
     */
    async confirm(value) {

      const values = value[ 'value' ]
      // 筛选结构认定

      if (values[ 0 ][ 0 ] === 3) {
        delete this.formSearch[ 'type' ]
      } else {
        this.formSearch.type = values[ 0 ][ 0 ]
      }
      //
      if (values[ 1 ][ 0 ]) {
        const url = values[ 1 ][ 0 ].split('&')

        this.activeUrl = url[ 0 ] || 'time'
        this.formSearch.sort = url[ 1 ]
      }

      // 品牌
      this.formSearch.brand = values[ 2 ][ 0 ][ 0 ]
      /**  价格区间
      const PriceRange = getPrice(values[ 2 ][ 1 ])

      this.formSearch.min = PriceRange[ 0 ] && this.formSearch.min
      this.formSearch.max = PriceRange[ 1 ] && this.formSearch.max*/

      //
      const formdata = preProcessData(this.formSearch)

      this.goodList = []

      const res = (await getGoodsBy(this.activeUrl, formdata)).data

      const item = res.list

      for (const i in item) {
        this.goodList.push(item[ i ])
      }

    },
    /**
     * 监听滚动
     */
    onScroll(e) { // 监听滚动
      console.log(e.detail.scrollTop)
    },
    /**
     * 取消
     */
    deleteGood() {
      this.seleteShow = false
      this.formSearch.brand = null
      this.formSearch.type = 4
    },
    /**
		 * 获取商品列表
		 */
    async getGoodList() {
      this.loading = true
      this.formSearch.page = 1
      this.formSearch.data = null
      if (this.formSearch.type === 4) {
        this.formSearch.type = null
      }
      const formdata = preProcessData(this.formSearch)
      const res = await getGoodsBy(this.activeUrl, formdata)

      this.total = res.data.total
      const item = res.data && res.data.list

      this.goodList = item

      this.len = this.goodList.length

      if (res.data.total === this.formSearch.page) {

        this.readMoreIndex = false
        this.seleteShow = false
      } else {
        this.readMoreIndex = true
      }
      const that = this

      setTimeout(() => { that.loading = false; that.triggered = false }, 200)

    },
    async searchList(value) {
      this.loading = true
      this.formSearch.data = value
      this.formSearch.page = 1
      console.log(value)
      const formdata = preProcessData(this.formSearch)

      this.goodList = []
      console.log(this.activeUrl)
      console.log(formdata)
      const res = (await getGoodsBy(this.activeUrl, formdata)).data

      // console.log('搜索列表', res)
      const item = res.list

      for (const i in item) {
        this.goodList.push(item[ i ])
      }
      setTimeout(() => { this.loading = false }, 0)
    },
    async readMorelist() {
      if (this.formSearch.page > this.total) { return } else {
        this.formSearch.page = this.formSearch.page + 1
        const res = await getGoodsBy(this.activeUrl, this.formSearch)
        const item = res.data && res.data.list

        for (const i in item) {
          this.goodList.push(item[ i ])
        }

        if (res.data.total === this.formSearch.page) {

          this.readMoreIndex = false
        } else {
          this.readMoreIndex = true
        }
      }
    },
    async results(val) {
      if (val) {
        const obj = val

        const count = obj.url.split('&')

        console.log(count)
        this.activeUrl = obj.url.split('&')[ 0 ] || 'time'
        // this.formSearch.data = obj.data || '车'
        this.formSearch.type = obj.type || 1
        if (count.length === 2) {
          this.formSearch.sort = obj.url.split('&')[ 1 ] || 'ASC'
        }
        if (obj.type === 3) {
          this.formSearch.type = null
          const res = await getGoodsBy(this.activeUrl, { data: this.formSearch.data, page: this.formSearch.page, size: this.formSearch.size, sort: 'ASC' })

          this.goodList = res.data && res.data.list
        } else {
          // console.log(this.formSearch)
          const res = await getGoodsBy(this.activeUrl, this.formSearch)

          this.goodList = res.data && res.data.list
        }

      }

      /**
			 *
			 */

    }
  }
}
</script>
<style lang="scss">
	.mall-home{
		width: 100wh;
		height: 93vh;
    padding-top: 160rpx;
		background-color: #F0F2F5;text-align: center;
    overflow: hidden;
		.mall-header{
			background: #ffffff;
			width: 100vw;
		}
		.mallbody {
			padding-top: 60rpx;
      min-height: 90vh;
		}

	}
  .mallPu{

  }
  .u-scroll-list{

  }
  .scroll-bar {
    height: 1200rpx;
    overflow: hidden;
  }
	.u-publish{
		position: fixed;
		border-radius: 100%;
		bottom:50rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		background-color: #007AFF;
    display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0 8rpx 16rpx #b8d6faff;
		.u-icon{
			color: white;
			margin-top: 0rpx;
		}
	}
  .u-loadmore{
    padding-bottom: 40rpx;
  }
  .u-popup{

    .label{
      font-size: 50rpx;
      font-weight: 500;
      padding: 20rpx;
      color: #000;
      widows: 85%;
      border-bottom: 2rpx solid rgba(58, 98, 233, 0.2);
    }
  }
  .popOn{

  }
.selectGood{
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 30rpx;

  .title{
    text-align: left;
    font-size: 35rpx;
    padding: 20rpx;
  }
  .labels{
    display: flex;
    flex-wrap: wrap;

    .label{
      width: 150rpx;
      background:rgba(233, 233, 233, 1);
      font-size: 30rpx;
      color:rgb(0, 0, 0)  ;
      padding: 10rpx 20rpx 10rpx 20rpx;
      border-radius:50rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
    }
    .active{
      width: 150rpx;
      padding: 10rpx 20rpx 10rpx 20rpx;
      font-size: 30rpx;
      border-radius:50rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
      background:#007bffbc ;
      border: solid 2rpx #007AFF;
      color: #Fff;
    }
  }
}
.Selete-title{
  font-weight: 600;
  font-size: 35rpx;
  padding-top: 50rpx;
  padding-bottom: 0rpx;
}
.price-title{
  text-align: left;
  font-size: 35rpx;
  padding: 20rpx;
  padding-left: 40rpx;
  padding-right: 20rpx;

}
.PriceRange{
  display: block;
  padding-left: 40rpx;
  padding-right: 20rpx;
  padding-bottom: 80rpx;

  .priceRa{
  display: flex;
  input{
    width: 230rpx;
    border-radius: 35rpx;
    border: solid 2rpx #c9c9c9;
  }
  text{
    width: 100rpx;
    line-height: 70rpx;
    font-weight: 700;
  }
}
}
.btn{
  display: flex;
  padding-bottom: 50rpx;
  button{
    width:300rpx;
    font-size: 35rpx;
    border-radius: 60rpx;
  }
  .infor{
    background: rgba(240, 242, 245, 1);
    color: rgba(181, 181, 181, 1);
  }
  .primary{
    background:#007AFF ;
    color: #fff;
  }
}

</style>
